<!--
 * @Descripttion:
 * @Author: qinyonglian
 * @Date: 2020-03-14 17:58:51
 * @LastEditors: qinyonglian
 * @LastEditTime: 2020-03-15 14:47:00
 -->
<template>
  <div class="je-plugin-test-list">
    <header class="mui-bar mui-bar-nav">
      <a
        id="icon-menu"
        class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"
      />
      <h1 class="mui-title">
        测试
      </h1>
      <a class="mui-action-back mui-icon mui-icon-home mui-pull-right mui-a-color" />
    </header>
    <div
      id="refreshContainer"
      class="mui-scroll-wrapper"
    >
      <div class="mui-scroll">
        <!--数据列表-->
        <div
          v-for="(item,index) in dataList"
          :key="index"
          style="border-bottom: 1px solid red;height: 100px;"
          @tap="showInfo(item)"
        >
          {{ item.MPXX_XXNR }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import { getBubbleList } from './action/test';

export default {
  components: {
  },
  data() {
    return {
      dataList: [],
      start: 0,
    };
  },
  created() {
    const param = {
      position: 'more',
      type: 'new',
      start: this.start * 10 - 10,
      limit: 10,
    };
    this.init(param); // 获取初始化数据
    const that = this;
    that.$nextTick(() => {
      // 下拉刷新   上拉加载更多
      mui('#refreshContainer').pullRefresh4HTML({
        // 下拉刷新
        down: {
          callback() {
            const pull = this;
            // 加载数据处理
            // that.noData = false;
            that.start = 1;
            that.init({
              position: 'more',
              type: 'new',
              start: that.start * 10 - 10,
              limit: 10,
            });
            // 结束加载，停止下拉
            pull.endPulldownToRefresh();
            pull.enablePullupToRefresh();
            mui.toast('数据更新成功');
          },
        },
        // 上拉加载
        up: {
          async callback() {
            const self = this;
            // 加载数据处理
            that.start++;
            const params = {
              position: 'more',
              type: 'new',
              start: that.start * 10 - 10,
              limit: 10,
            };
            const data = await getBubbleList(params);
            if (data.success === false) {
              mui.toast('数据查询失败');
              return false;
            }

            const result = data.obj;
            // 有数据继续下拉
            self.endPullupToRefresh(false);
            // 无数据禁用上拉加载
            if (result != null && result.rows.length < 10) {
              self.endPullupToRefresh(true);
            }
            that.dataList = that.dataList.concat(result.rows);
          },
        },
      });
    });
  },
  methods: {
    async init(param) {
      const data = await getBubbleList(param);
      if (data.success) {
        this.dataList = data.obj.rows;
      } else {
        mui.toast('查询失败！');
      }
    },
    showInfo(item) {
      // 页面的跳转
      JE.openWindow({
        url: './pages_testDetail_index.html',
        hideNView: false, // 重要参数，是否显示原生头
        title: 'test详情',
        extras: {
          model: item,
        },
        waiting: {
          autoShow: true, // 自动显示等待框，默认为true
          title: '正在加载...', // 等待对话框上显示的提示内容
        },
      });
    },
  },
}
</script>

<style>
.mui-pull-bottom-pocket {
  position: absolute;
  bottom: -65px;
}
</style>
<style lang="less" scoped>
@import "~@/theme/index.less";
.je-plugin-test-list {
  position: relative;
  height: 100%;
  .mui-scroll-wrapper {
    left: 5px;
    right: 5px;
    top: 50 * @hd;
    width: auto;
  }
}
</style>
